<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>UI组件之浮层</title>
	<link rel="stylesheet" href="styles/task6.css">
</head>
<body>
	<main id="main">
		<button id="try">有种点我试试！</button>
		<button id="disable-scroll">目前弹出后禁用滚动，点击后开启</button>
		<button id="try2">点击我可以设置宽高</button>

		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
		<section class="place">这是为了测试浮层弹出时的浏览器页面滚动</section>
	</main>
	<div id="mask">
		<article id="popup" class="pop">
			<h1 id="popup-top" class="pop-head">这是个浮层</h1>
			<p>有种拽我试试！</p>
			<div id="popup-btns" class="pop-btns">
				<button id="pop1-conf">确定</button>
				<button id="pop1-canc">取消</button>
			</div>
		</article>
		<article id="popup2" class="pop">
			<form action="">
				<h1 id="popup2-top" class="pop-head">这也是个浮层</h1>
				<p>再拽我试试！动一下算我输！给你个机会改变大小吧！</p>
				<div id="pop2-input">
					<label>Width: <input id="pop-w" type="number" step="10" min="300" max="800" required/></label>
					<label>Height: <input id="pop-h" type="number" step="10" min="300" max="600" required/></label>
				</div>
				<div id="popup2-btns" class="pop-btns">
					<button id="pop2-change">更改宽高</button>
					<button id="pop2-conf">确定</button>
					<button id="pop2-canc">取消</button>
				</div>
			</form>
		</article>
	</div>
	
	<!-- <script src="scripts/task6-1.js" ></script> -->
	<script src="scripts/task6-2.js" ></script>
</body>
</html>